<script setup>
import { ref } from 'vue';
import { orderListByUserId } from '../apis/order.js'
const orderList = ref([])
async function getOrderLisT() {
    const res = await orderListByUserId()
    orderList.value = res.data.data
}
getOrderLisT()
//判断订单状态
function isStatus(val) {
    if (val === 1) {
        return '待付款'
    }
    if (val === 2) {
        return '待接单'
    }
    if (val === 3) {
        return '待派送'
    }
    if (val === 4) {
        return '派送中'
    }
    if (val === 5) {
        return '已完成'
    }
    if (val === 6) {
        return '已取消'
    }
    if (val === 7) {
        return '已退款'
    }
}
const show = ref(false)
const order = ref({})
function orderDetail(item) {
    order.value = item
    show.value = true
}
const show2 = ref(false)
const cancelReason = ref('')
const orderId = ref()
function cancelOrder(item) {
    show2.value = true
    console.log(item);
    orderId.value = item.id;

}
import { userCancelOrder } from '../apis/order.js'
//确认
async function confirm() {
    //取消订单
    await userCancelOrder(orderId.value, cancelReason.value)
    getOrderLisT()
    cancelReason.value = ''
}
//取消
function cancel() {
    cancelReason.value = ''
}

import router from '../router/index';
//返回
function onClickLeft() {
   router.push('/user')
}
</script>
<template>
    <div>
        <van-nav-bar title="订单管理" left-text="返回" left-arrow  @click-left="onClickLeft"/>
        <div v-for="item in orderList" :key="iten">
            <van-card :price="item.amount" :desc="'下单时间:' + item.orderTime" :title="'订单号:' + item.number"
                thumb="https://fastly.jsdelivr.net/npm/@vant/assets/ipad.jpeg">
                <template #tags>
                    订单状态: <van-tag plain type="primary">{{ isStatus(item.status) }}</van-tag>
                    <div v-if="item.status === 1 || item.status === 2 || item.status === 3">
                        预计到达时间: <van-tag plain type="primary">{{ item.estimatedDeliveryTime }}</van-tag>
                    </div>

                </template>
                <template #footer>
                    <van-button size="small"
                        v-if="item.status !== 4 && item.status !== 5 && item.status !== 6 && item.status !== 7"
                        @click="cancelOrder(item)">
                        取消订单</van-button>
                    <van-button size="small" @click="orderDetail(item)">查看详情</van-button>

                </template>
            </van-card>

        </div>
        <van-dialog v-model:show="show" title="订单详情" showCancelButton cancelButtonText="关闭" :showConfirmButton="false">
            <h4 style="margin-left: 10px;">收货地址</h4>
            <div style="margin-left: 10px;">{{ order.address }}</div>
            <div style="margin-left: 10px;">{{ order.consignee }} {{ order.phone }}</div>


            <h4 style="margin-left: 10px;">菜品信息</h4>
            <div v-for="item in order.orderDetailList" :key="item" style="margin-left: 10px;">
                {{ item.name }} x{{ item.number }}
            </div>
            <h4 style="margin-left: 10px;">备注信息</h4>
            <div style="margin-left: 10px;">
                {{ order.remark ? order.remark : '暂无' }}
            </div>
            <div v-if="order.cancelReason">
                <h4 style="margin-left: 10px;">取消原因</h4>
                <div style="margin-left: 10px;">
                    {{ order.cancelReason }}
                </div>
            </div>
            <div v-if="order.cancelTime">
                <h4 style="margin-left: 10px;">取消时间</h4>
                <div style="margin-left: 10px;">
                    {{ order.cancelTime }}
                </div>
            </div>
            <div v-if="order.deliveryTime">
                <h4 style="margin-left: 10px;">送达时间</h4>
                <div style="margin-left: 10px;">
                    {{ order.deliveryTime }}
                </div>
            </div>
            <div v-if="order.payMethod">
                <h4 style="margin-left: 10px;">支付方式</h4>
                <div style="margin-left: 10px;">
                    {{ order.payMethod === 1 ? '支付宝' : '微信' }}
                </div>
            </div>
        </van-dialog>
        <van-dialog @confirm="confirm" @cancel="cancel" v-model:show="show2" title="取消订单" show-cancel-button>
            <van-cell-group inset>
                <van-field v-model="cancelReason" rows="1" autosize label="取消原因" maxlength="50" type="textarea"
                    placeholder="请输入取消原因,限50字" />
            </van-cell-group>
        </van-dialog>
    </div>
</template>